<?php

class Article {
  public $title;
  public $author;
  public $create_time;
  public $read_times;
  public $remark_times;
  
  function __construct($title, $author, $content) {
    $this->title = $title;
    $this->author = $author;
    $this->content = $content;
    $this->read_times = 100;
    $this->remark_times = 1000;
    $this->create_time = (new DateTime('NOW'))->format('Y-m-d H:i:s');
  }
}


session_start();
$username = $_SESSION['username'];
$uid = $_SESSION['uid'];
session_write_close();

$mysqli = new mysqli('localhost', 'blog-admin', 'blog-admin', 'blog');
$result = $mysqli->query('SELECT a.*,u.username as author FROM articles as a left join users as u on a.author_id=u.id order by a.create_time desc');

$articles = array();

while ($row = $result->fetch_array()) {
  $content = base64_decode($row['content']);
  $content = strlen($content) > 100 ? substr($content, 0, 100) . '...' : $content;
  $article = new Article($row['title'], $row['author'], $content);
  $article->create_time = $row['create_time'];
  $article->read_times = $row['read_times'];
  $article->remark_times = $row['remark_times'];
  $articles[] = $article;
}

$result->close();
$mysqli->close();
?>

<html>
  <head>

    <style>
      body {
      margin: 0;
      padding: 0;
      background: #f2f2f2;
      /*font-family: 'sans';*/
      }
      .nav-bar {
      width: 100%;
      height: 70px;
      background: #333;
      line-height: 70px;
      }
      .nav-bar .content {
        width: 80%;
        margin: 0 auto;
        padding: 0;
      }

      .nav-bar .content ul {
        list-style: none;
      }

      .nav-bar ul li {
      color: #fff;
      background: #333;
      float: left;
      width: 120px;
      font-size: 30px;
      cursor: pointer;
      text-align: center;
      }

      .nav-bar .nav-hover {
      background: #ddd;
      color: #333;
      float: left;
      width: 100px;
      font-size: 30px;
      cursor: pointer;
      text-align: center;
      }

      #content {
        width: 80%;
        margin: 0 auto;
      }
      #article-list ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      #article-list ul li {
        padding: 10px 20px;
        background: #fff;
        margin-top: 20px;
        font-weight: bold;
        cursor: pointer;
        border: 1px solid #dfdfdf;
      }
      #article-list ul li:hover {
        background: #f2f2f2;
      }

      #article-list .article-title {
        font-size: 20px;
      }
      #article-list .article-content {
        font-size: 18px;
        color: #888;
        margin-top: 10px;
      }

      #article-list .article-info {
        font-size: 16px;
        color: #888;
        margin-top: 5px;
      }
    </style>
        
    <script type='text/javascript'>
      window.onload = function() {
      //window.document.getElementById("home").className = 'nav-hover';
      }      
    </script>
  </head>
      
  <body>
    <div class='nav-bar'>
      <div class="content">
        <ul>
          <a href='/home.php'><li id='home' class='nav-hover'>Home</li></a>
          <a href='/news.php'><li>News</li></a>
          <a href='/post.php'><li>Post</li></a>
        </ul>

        <a href="/logout.php"><div style='float:right; color:#fff'>退出</div></a>
        
        <div style='float:right; color:#fff; margin-right: 10px;'>
          <?php echo $username; ?>
        </div>
      </div>
    </div>
      
    <div id="content">
      <div id="article-list">
        <ul>
<?php foreach ($articles as $article) { ?>
           <li>
            <div>
              <div class="article-title">
                <?php echo $article->title;?>
              </div>
              <div class="article-content">
                <?php echo $article->content; ?>
              </div>
              <div class="article-info">
                <?php echo $article->create_time ?> 
                | 作者： <?php echo $article->author;?> 
                | 阅读数: <?php echo $article->read_times; ?> 
                | 评论数: <?php echo $article->remark_times; ?>
              </div>
            </div>
          </li>
<?php } ?>
        </ul>
      </div>
    </div>
  </body>
</html>

